<template>
    <li>
      <label>
        <input type="checkbox" :checked="todo.done" @change="checkittodo(todo.id)"/>
        <span v-show="!todo.isEdit">{{todo.text}}</span>
        <input v-show="todo.isEdit" type="text" :value="todo.text" @blur="losblur(todo,$event)" ref="inputTitle">
      </label>
      <button class="btn btn-danger" @click="deletetodo(todo.id)">删除</button>
      <button class="btn btn-change" @click="changetodo(todo)"  v-show="!todo.isEdit">编辑</button>
    </li>
</template>

<script>
    export default {
        name:'todoitem',
        props:['todo'],
        methods:{
          checkittodo(id){
            // this.checktodo(id)
            this.$bus.$emit('checktodo',id)
          },
          deletetodo(id){
            // this.detodo(id)
            this.$bus.$emit('detodo',id)
          },
          changetodo(todo){
            if(todo.isEdit!=null){
              todo.isEdit = true
            }
            else{
              this.$set(todo,'isEdit',true)
            }
            this.$nextTick(function(){
              this.$refs.inputTitle.focus()
            })
          },
          losblur(todo,e){
            todo.isEdit = false
            this.$bus.$emit('isEdit',todo,e.target.value)
          }
        }
    }
</script>

<style scoped>
    li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }
    li:hover button {
      display: block;
    }
</style>